<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/blog.css"/>
    <title>blog</title>
    <style type="text/css">
        .banner{width: 100%;height: 400px;background: url(assets/img/r.jpg) no-repeat 100% 100%;background-size: 100% 100%;}
        .font{width: 90%;text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .font h1{word-spacing: 20px;letter-spacing: 10px;font-size: 50px;}
        .fontP{text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .forms{width: 90%;margin: 0 auto;}
        .form{background-color: #D6CCC5;text-align: center;display: flex;justify-content: space-around;align-items: center;height: 60px;width: 30%;padding: 0 20px;margin: 30px auto;}
        .form input{border-radius: 5px;display: block;height: 30px;width: 350px;border: none;padding-left: 10px;font-weight: bold;}
        .form button{width: 100px;height: 30px;border-radius: 5px;border: none;background: url(assets/img/button.png) no-repeat 10px 6px;background-size: 15px 15px;background-color: #F19323;font-weight: bold;}
        /* banner完 */
        .rightBox1{height: 160px;background: url(assets/img/banner4i.jpg) no-repeat;background-size: 100% 100%;}
        /* blog */
        @media screen and (max-width:940px) {
        .form{flex-wrap: wrap;padding: 20px 20px;margin: 0px auto;}
        .fontP{font-size: 15px;padding-top: 0px;}
        /* blog */
        .rightBox1{height: 260px;background: url(assets/img/banner4i.jpg) no-repeat;background-size: 100% 100%;}
        }
        @media screen and (max-width:800px){
        .form{width: 40%;padding: 20px 20px;margin: 0px auto;}
        .font{line-height: 50px;padding-top: 10px;}
        .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:650px){
        .form{width: 40%;padding: 20px 40px;margin: 5px auto;}
        .font{line-height: 40px;padding-top: 10px;}
        .font h1{word-spacing: 10px;letter-spacing: 10px;font-size: 40px;}
        .fontP{font-size: 15px;padding-top: 0px;}
        }
    </style>
</head>
<body>
    <div id="bigBox">
            <!--        头部-->
            <div th:replace="pub_head"></div>
        <div class="blogs">
            <div class="center1">
                <div class="ways">
                    <div class="way" th:each="user:${modules[9].banners}" th:onclick="'detailFun('+${user.id}+')'">
                        <img th:src="${user.imgUrl1}">
                        <h3 class="wayF2">[[${user.title}]]</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">[[${user.description}]]</p>
                            <p class="wayF1">[[${user.content}]]<span>[[${user.content1}]]</span></p>
                        </div>
                    </div>
                    <!--<div class="way">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way">
                        <img src="assets/img/way.png">
                        <h3>Civita di Bagnoregio,</h3>
                        <h3 class="wayF2">Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin1">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way way1">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia111</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin1">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin1">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin2">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>
                    <div class="way margin3">
                        <img src="assets/img/way.png">
                        <h3 class="wayF2">Civita di Bagnoregio,Italia</h3>
                        <hr />
                        <div class="wayB">
                            <p class="wayF">April 14, 2015</p>
                            <p class="wayF1">Uploaded by <span>John Doe</span></p>
                        </div>
                    </div>-->
                </div><!--ways-->
                <div class="rightBox">
                    <div class="rightBox1">
                        <h4>[[${modules[7].module.name}]]</h4>
                    </div>
                    <div class="box1">
                        <div class="rightTitle1">
                            <h4>[[${modules[7].module.title}]]</h4>
                        </div>
                        <p>[[${modules[7].module.description}]]</p>
                    </div>
                    <div class="box2">
                        <div class="rightTitle2">
                            <h4>[[${modules[8].module.title}]]</h4>
                        </div>
                        <div class="boxs2" th:each="user1:${modules[8].banners}" th:onclick="'detailFun('+${user1.id}+')'">
                            <div class="boxs2Img"><img th:src="${user1.content1}"></div>
                            <div class="boxs2P"><p>[[${user1.title}]]</p></div>
                        </div>
                       <!-- <div class="boxs2">
                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>
                            <div class="boxs2P"><p>Partner up: The fellowship of fitness</p></div>
                        </div>
                        <div class="boxs2">
                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>
                            <div class="boxs2P"><p>Best and worst exercises to do when you have a cold</p></div>
                        </div>
                        <div class="boxs2">
                            <div class="boxs2Img"><img src="assets/img/footer.jpg"></div>
                            <div class="boxs2P"><p>Yoga for Rheumatoid Arthritis: Stretching Your Stiffness Away</p></div>
                        </div>-->
                    </div>
                    <div class="box1">
                        <div class="rightTitle3">
                            <h4>Archives</h4>
                        </div>
                        <input type="text" v-model="Archives" placeholder="Seledt Month">
                    </div>
                    <div class="box3">
                        <div class="rightTitle4">
                            <h4>Gallery</h4>
                        </div>
                        <!--                        detail6-->

                        <div class="ul">
                            <ul>
                                <li th:each="user2:${modules[10].banners}" th:onclick="'detailFun('+${user2.id}+')'"><img th:src="${user2.imgUrl1}"></li>
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
<!--                                <li><img src="assets/img/footer.jpg"></li>-->
                            </ul>
                        </div>
                    </div>
                    <div class="box4">
                        <div class="rightTitle5">
                            <h4>[[${modules[11].module.title}]]</h4>
                        </div>

                        <div class="ul1">
                            <ul>
                                <li th:each="user3:${modules[11].banners}" th:onclick="'detailFun('+${user3.id}+')'">[[${user3.title}]]</li>
                                <!--<li>>May 2015</li>-->
                                <!--<li>>May 2015</li>-->
                                <!--<li>>May 2015</li>-->
                            </ul>
                        </div>
                    </div>
                </div><!--rightBox-->
            </div><!--blog-->
        </div><!--blogs-->
        <!--        脚部-->
        <div th:replace="pub_footer"></div>
    </div><!--bigBox-->
    <script src="assets/js/js/jquery-1.8.2.min.js"></script>
    <script src="assets/js/js/common.js"></script>
    <script src="assets/js/js/html5zoo.js"></script>
    <script src="assets/js/js/jquery.countuo.min.js"></script>
    <script src="assets/js/js/jquery.js"></script>
    <script src="assets/js/js/wow.min.js"></script>
    <script src="assets/js/js/jquery.waypoints.min.js"></script>
    <script src="assets/utils/index.js"></script>

    <script type="text/javascript">
        // var one=new Vue({
        //     el:'#bigBox',
        //     data:{
        //         name:'',
        //         email:''
        //     }
        // })
        function detailFun(id){
            window.location.href = `cms_detail?id=${id}`;
        }

    </script>
</body>
</html>
